<?php if (!defined('THINK_PATH')) exit();?><!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>layer弹框</title>
    <style>
        #open{
            color: #FD482C;

        }
        #hello{
            color: #003bb3;
        }

        #meng{
            color: #dd1144;
        }
        #ha{
            color: #46a546;
        }
        #dw{
            color: #da4f49;
        }
        #ys{
            color: #f89406;
        }
    </style>
</head>
<body>
    <div style="display: none;" id="img">
        <img src="/Public/images/Logo.png">
    </div>
    <div style="height: 50px;width: 800px;margin: 0 auto;border: 3px lightseagreen dashed">
        <button class="btn" id="open">open</button>&nbsp;
        <button class="btn" id="meng">卖萌</button>&nbsp;
        <button class="btn" id="hello">hello!</button>&nbsp;
        <button class="btn" id="ha">点击有惊喜</button>&nbsp;
        <button class="btn" id="dw">断网中.....</button>&nbsp;
        <button class="btn" id="ys">算一卦吧!</button>&nbsp;

    </div>
</body>
</html>
<script type="text/javascript" src="/Public/js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="/Public/layer/layer.js"></script>
<script type="text/javascript">
    $("#open").on('click',function(){
        layer.msg('就是酱紫!!!!!');
    });
    $("#hello").on('click',function(){
        layer.tips('你好啊!!!','#hello');
    });
    $("#meng").on('click',function(){
        layer.msg('玩命卖萌中', function(){
        //关闭后的操作
            layer.open({
                type: 1,
                title: false,
                closeBtn: 0,
                area: '516px',
                skin: 'layui-layer-nobg', //没有背景色
                shadeClose: true,
                content: $('#img')
            });
        });
    });
    $("#ha").on('click',function(){
        layer.msg('大爷!来呀!',{
            time:2000,
            btn:['你大爷']
        });
    });
    $('#dw').on('click',function(){
        layer.load();
        setTimeout(function(){
            layer.closeAll('loading');
        },3000);
    });
    $('#ys').on('click',function(){
        layer.open({
            type:1,
            title:false,
            closeBtn:false,
            area: '300px;'
            ,shade: 0.8
            ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
            ,resize: false
            ,btn: ['想知道原因', '我不帅']
            ,btnAlign: 'c'
            ,moveType: 1 //拖拽模式，0或者1
            ,content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">你知道吗？亲！<br>你今天又变帅了很多哦!!!<br>^_^</div>'
            ,success: function(layero) {
                var btn = layero.find('.layui-layer-btn');
                btn.find('.layui-layer-btn0').attr({
                    href: 'http://www.baidu.com/'
                    , target: '_blank'
                });
            }

        });
    });
</script>